﻿
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>基于amazeui用户充值页面 - 源码之家</title>
<link rel="stylesheet" href="/layer/mobile/need/layer.css">
	<link rel="stylesheet" href="/layer/theme/default/layer.css">
<link rel="stylesheet" type="text/css" href="/chongzhi/css/amazeui.min.css" />
<link rel="stylesheet" type="text/css" href="/chongzhi/css/main.css" />
	<script type="text/javascript" src="/chongzhi/js/jquery.min.js"></script>
	<script type="text/javascript" src="/chongzhi/js/amazeui.min.js"></script>
	<script type="text/javascript" src="/chongzhi/js/ui-choose.js"></script>
	<script src="/layer/layer.js"></script>


	<script type="text/javascript">
		$(function(){

			userinit();
		})

		 function userinit(){
			 $.ajax({
				 url:"/user/queryUserbyid",
				 type:"POST",
				 data:{id:$("#userid").val()},
				 success:function(data){
					 $("#chongzhiren").html($("#username").val())
					 if(data.vipdate!=null){
						 var unixTimestamp =new Date(data.vipdate);
						 commonTime = unixTimestamp.toLocaleString();
						 $("#daoQiShiJian").html(commonTime)
					 }else{

						 $("#daoQiShiJian2").html("请购买会员")
					 }

					 $("#chongzhiimg").prop("src",""+$("#userimg").val())

					 if($("#hy").val()==1){

						 $("#chongZhiVipLeiXing").html("普通用户:")
					 }else if($("#hy").val()==2){
						 $("#chongZhiVipLeiXing").html("VIP:")
					 }else if($("#hy").val()==3){
						 $("#chongZhiVipLeiXing").html("超级VIP:")
					 }

				 },
				 error:function(){
					 layer.alert("网络繁忙,请稍等")
				 }



		 })
		 }

		 function byVip(){
            if($("[name='radio1']:checked").val()!=null&&$("[name='radio1']:checked").val()!=""&&$("[name='docVlGender']:checked").val()!=""&&$("[name='docVlGender']:checked").val()!=null){
         		  if($("[name='radio1']:checked").val()==2){
			   		location.href="/goAlipay?price="+$("#price").html()+"&status="+2+"&leixing="+$("[name='leixing']:checked").val()+"&userId="+$("#userid").val();

		  		 }else{
					  layer.alert("微信支付功能维护中,请选择支付宝支付");
				  }
			}else{
            	layer.alert("信息有误,请补全");
			}

		 }
		 function superVip(){

			location.href="/view/toView?view=chaojivip";
		 }
	</script>



</head>

<body>
<input hidden="hidden" id="userid" th:value="${session.user?.userId}">
<input hidden="hidden" id="username" th:value="${session.user?.bzname}">
<input hidden="hidden" id="userjifen" th:value="${session.user?.jifen}">
<input hidden="hidden" id="nickname" th:value="${session.user?.nickName}">
<input hidden="hidden" id="hy" th:value="${session.user?.hy}">
<input hidden="hidden" id="userimg" th:value="${session.user?.img}">
<div class="pay">
	<!--主内容开始编辑-->
	<div class="tr_recharge">
		<div class="tr_rechtext">
			<p class="te_retit"><img src="/chongzhi/images/coin.png" alt="" />充值中心</p>
			<p>1.本站是vip充值中心</p>
			<p>2.你可以选择支付宝或者是微信的付款方式来进行充值，10元1个月,10元起充</p>
			<p>3.你可以选择普通会员,超级会员,充值越多越优惠</p>
			<p>4.vip可以参加各种优惠,参与各种活动,福利多多,赶快购买吧</p>
		</div>

			<div class="tr_rechbox">
				<div class="tr_rechhead">
					<img  id="chongzhiimg"  />
					<p>
						<span id="chongZhiVipLeiXing"></span>
						<span id="chongzhiren"></span>
					</p>
					<div class="tr_rechheadcion">
						<!--到期时间-->
						<span id="daoQiShiJian2">到期时间:<font id="daoQiShiJian" color="red"></font></span>
					</div>
				</div>
				<div class="tr_rechli am-form-group">
					<ul class="ui-choose am-form-group" id="uc_01">
						<li>
							<label class="am-radio-inline">
								<input type="radio"  value="1" name="docVlGender" required data-validation-message="请选择一项充值额度"> 10￥<p><font color="red">1个月</font></p>
								</label>
						</li>
						<li>
							<label class="am-radio-inline">
								<input type="radio" value="2" name="docVlGender" data-validation-message="请选择一项充值额度"> 20￥<p><font color="red">2个月</font></p>
								</label>
						</li>

						<li>
							<label class="am-radio-inline">
								<input type="radio" value="3" name="docVlGender" data-validation-message="请选择一项充值额度"> 50￥<p><font color="red">6个月</font></p>
								</label>
						</li>
						<li>
							<label class="am-radio-inline">
								<input type="radio" value="4" name="docVlGender" data-validation-message="请选择一项充值额度"> 90￥<p><font color="red">一年</font></p>
							</label>
						</li>
					</ul>
					<!--<span>1招兵币=1元 10元起充</span>-->
				</div>
				<div class="tr_rechoth am-form-group">
					<span>其他金额：</span>
					<input type="number" min="10" max="10000" value="10.00元" class="othbox" data-validation-message="充值金额范围：10-10000元" />
					<!--<p>充值金额范围：10-10000元</p>-->
				</div>
				<div class="tr_rechcho am-form-group">
					<span>充值方式：</span>
					<label class="am-radio">
							<input type="radio" name="radio1" value="1" data-am-ucheck required data-validation-message="请选择一种充值方式"><img src="/chongzhi/images/wechatpay.png">
						</label>
					<label class="am-radio" style="margin-right:30px;">
							<input type="radio" name="radio1" value="2" data-am-ucheck data-validation-message="请选择一种充值方式"><img src="/chongzhi/images/zfbpay.png">
						</label>
				</div>
				<br>
				<div class="tr_rechcho am-form-group">
					<span>充值类型：</span>
					<label class="am-radio">
						<input type="radio" name="leixing" checked value="2" data-am-ucheck required data-validation-message="请选择一种充值方式">普通VIP
					</label>
					<label class="am-radio" style="margin-right:30px;">
						<input type="radio" name="leixing" value="3" onchange="superVip()" data-am-ucheck data-validation-message="请选择一种充值方式">超级VIP
					</label>
				</div>
				<div class="tr_rechnum">
					<span>应付金额：</span>
					<p class="rechnum" id="price">0.00</p>元
				</div>
			</div>
			<div class="tr_paybox">
				<input type="button" onclick="byVip()" value="确认支付" class="tr_pay am-btn" />
				<span>温馨提示：招兵币只限于在简历详情中购买简历，遇到问题请拨打联系电话。</span>
			</div>

	</div>
</div>


<script type="text/javascript">
	// 将所有.ui-choose实例化
	$('.ui-choose').ui_choose();
	// uc_01 ul 单选
	var uc_01 = $('#uc_01').data('ui-choose'); // 取回已实例化的对象
	uc_01.click = function(index, item) {
		console.log('click', index, item.text())
	}
	uc_01.change = function(index, item) {
		console.log('change', index, item.text())
	}
	$(function() {

		/*$('#uc_01 li:eq(3)').click(function() {
			$('.tr_rechoth').show();
			$('.tr_rechoth').find("input").attr('required', 'true')
			$('.rechnum').text('10.00元');
		})*/
		$('#uc_01 li:eq(0)').click(function() {
			$('.tr_rechoth').hide();
			$('.rechnum').text('10.00');
			$('.othbox').val('');
		})
		$('#uc_01 li:eq(1)').click(function() {
			$('.tr_rechoth').hide();
			$('.rechnum').text('20.00');
			$('.othbox').val('');
		})
		$('#uc_01 li:eq(2)').click(function() {
			$('.tr_rechoth').hide();
			$('.rechnum').text('50.00');
			$('.othbox').val('');
		})
		$('#uc_01 li:eq(3)').click(function() {
			$('.tr_rechoth').hide();
			$('.rechnum').text('90.00');
			$('.othbox').val('');
		})
		$(document).ready(function() {
			$('.othbox').on('input propertychange', function() {
				var num = $(this).val();
				$('.rechnum').html(num + ".00");
			});
		});
	})

	$(function() {
		$('#doc-vld-msg').validator({
			onValid: function(validity) {
				$(validity.field).closest('.am-form-group').find('.am-alert').hide();
			},
			onInValid: function(validity) {
				var $field = $(validity.field);
				var $group = $field.closest('.am-form-group');
				var $alert = $group.find('.am-alert');
				// 使用自定义的提示信息 或 插件内置的提示信息
				var msg = $field.data('validationMessage') || this.getValidationMessage(validity);

				if(!$alert.length) {
					$alert = $('<div class="am-alert am-alert-danger"></div>').hide().
					appendTo($group);
				}
				$alert.html(msg).show();
			}
		});
	});
</script>
<div style="text-align:center;">
<p>更多源码：<a href="http://www.mycodes.net/" target="_blank">源码之家</a></p>
</div>
</body>
</html>
